<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>ajax使用实例</p>
    <button onclick="getData()">获取数据</button>
    <img id="img" src="" width="200">
    <audio controls src="http://m701.music.126.net/20220419173602/58069a4e78ee1f0f3d9fd75623067815/jdymusic/obj/wo3DlMOGwrbDjj7DisKw/13928655038/94d4/85cd/162c/bdba1c77cfb63b30db9fb49425e7482f.mp3"></audio>
    <script>
        function getData() {
            // 1. 创建ajax对象
            var oAjax = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTT');
            // 2. 打开链接 准备发请求 调用open方法，一共三个参数
            // 第一个是请求的方法 get/post
            // 第二个是地址 如果是get请求就将数据放在url上
            // 第三个是 是否异步 默认true
            oAjax.open('get', 'https://api.apiopen.top/todayVideo', true)
            // 3. 发送请求
            oAjax.send();

            // 4. 处理返回的数据
            oAjax.onreadystatechange = function() {
                // 这里返回的数据要么是xml格式，要么是json格式
                if(oAjax.readyState == 4) {
                    if(oAjax.status == 200) {
                        // status 是请求的状态码 1xx 2xx 3xx 4xx 5xx
                        // console.log(oAjax.responseText);
                        var res = JSON.parse(oAjax.responseText);
                        console.log(res.result);
                        var imgUrl = res.result[1].data.content.data.cover.detail;
                        document.querySelector('#img').src = imgUrl;
                    }
                }
            }
        }
        // ========== node接口示例 =========
        window.onload = function() {
            var ajax1 = new XMLHttpRequest();
            ajax1.open('get', 'http://localhost:3000/personalized/newsong')
            ajax1.send();
            ajax1.onreadystatechange = function() {
                if(ajax1.readyState == 4) {
                    var res = JSON.parse(ajax1.responseText);
                    console.log(res);
                }
            }
        }
    </script>
</body>
</html>